<template>
  <a-modal
    :maskClosable="false"
    title="修改密码"
    :width="500"
    wrapClassName="dialog-box"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :bodyStyle="bodyStyle"
    :destroyOnClose="true"
    centered
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-form ref="pwdForm" :form="form" id="pwdForm">
      <a-popover
        placement="rightTop"
        :trigger="['focus']"
        :getPopupContainer="(trigger) => trigger.parentElement"
        v-model="state.passwordLevelChecked">
        <template slot="content">
          <div :style="{ width: '240px' }" >
            <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
            <a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor " />
            <div style="margin-top: 10px;">
              <span>请至少输入 8 个字符。请不要使用容易被猜到的密码。</span>
            </div>
          </div>
        </template>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="新密码"
        >
          <a-input
            size="large"
            type="password"
            @click="handlePasswordInputClick"
            autocomplete="false"
            placeholder="至少8位密码，区分大小写"
            v-decorator="['loginPassword', {rules: [{ required: true, message: '至少8位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
          ></a-input>
        </a-form-item>
      </a-popover>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="确认密码"
      >
        <a-input
          size="large"
          type="password"
          autocomplete="false"
          placeholder="确认密码"
          v-decorator="['password2', {rules: [{ required: true, message: '至少8位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
        ></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { mixinDevice } from '@/utils/mixin.js'
import { mapActions } from 'vuex'
import { accountsresetMemberPwd } from '@/api/system/system'
const levelNames = {
  0: '低',
  1: '低',
  2: '中',
  3: '强'
}
const levelClass = {
  0: 'error',
  1: 'error',
  2: 'warning',
  3: 'success'
}
const levelColor = {
  0: '#ff0000',
  1: '#ff0000',
  2: '#ff7e05',
  3: '#52c41a'
}
export default {
  name: 'ChangePwdDialog',
  mixins: [mixinDevice],
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      visible: false,
      confirmLoading: false,
      loading: false,
      bodyStyle: {
        overflowY: 'auto'
      },
      state: {
        time: 60,
        smsSendBtn: false,
        passwordLevel: 0,
        passwordLevelChecked: false,
        percent: 10,
        progressColor: '#FF0000'
      },
      form: this.$form.createForm(this),
      id: '',
      type: ''
    }
  },
  mounted () {
  },
  methods: {
    ...mapActions(['ChangePwd']),
    show (obj) {
      this.visible = true
      this.state = {
        time: 60,
        smsSendBtn: false,
        passwordLevel: 0,
        passwordLevelChecked: false,
        percent: 10,
        progressColor: '#FF0000'
      }
      this.type = obj.type
      this.id = obj.id
    },
    handlePasswordLevel (rule, value, callback) {
      if (value) {
        let level = 0
        // 判断这个字符串中有没有数字
        if (/[0-9]/.test(value)) {
          level++
        }
        // 判断字符串中有没有字母
        if (/[a-zA-Z]/.test(value)) {
          level++
        }
        // 判断字符串中有没有特殊符号
        if (/[^0-9a-zA-Z_]/.test(value)) {
          level++
        }
        this.state.passwordLevel = level
        this.state.percent = level * 30
        if (level >= 2) {
          if (level >= 3 && value.length >= 8 && value.length <= 20) {
            this.state.percent = 100
            callback()
          }
          callback(new Error('密码规则是长度大于8位小于20位，密码由字母、数字和特殊字符组成'))
        } else {
          if (level === 0) {
            this.state.percent = 10
          }
          callback(new Error('密码规则是长度大于8位小于20位，密码由字母、数字和特殊字符组成'))
        }
      }
      callback()
    },

    handlePasswordInputClick () {
      if (!this.isMobile()) {
        this.state.passwordLevelChecked = true
        return
      }
      this.state.passwordLevelChecked = false
    },

    handlePasswordCheck (rule, value, callback) {
      const password = this.form.getFieldValue('loginPassword')
      if (value === undefined) {
        callback(new Error('请输入密码'))
      }
      if (value && password && value.trim() !== password.trim()) {
        callback(new Error('两次密码不一致'))
      }
      callback()
    },

    // 提交
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          var params = {
            id: this.id,
            type: this.type,
            password: values.loginPassword
          }
          return accountsresetMemberPwd(params)
            .then(res => {
              this.confirmLoading = false
              this.$message.success('重置成功!')
              this.visible = false
              // this.$emit('ok')
            })
        }
      })
    },
    // 关闭弹框
    handleCancel () {
      this.visible = false
    }
  },
  computed: {
    passwordLevelClass () {
      return levelClass[this.state.passwordLevel]
    },
    passwordLevelName () {
      return levelNames[this.state.passwordLevel]
    },
    passwordLevelColor () {
      return levelColor[this.state.passwordLevel]
    }
  }
}
</script>
